<template>
	<view class="content">
		<div class="title">
			问题与意见
		</div>
		<div class="input textarea">
			<textarea placeholder="请填写您的意见和建议" maxlength='100' name="" id=""></textarea>
		</div>
		<div class="title">
			图片
		</div>
		<div class="input image-upload">
			<jade-image-upload
			 :list="media"
			 :control="control"
			 :columnType="columnType"
			 :maxCount="maxCount"
			 :compressSize="compressSize"
			 :compressQuality="compressQuality"
			 :compressWidth='compressWidth'
			 :imageSize="imageSize"
			 :sourceType="sourceType"
			 @chooseFile="chooseFile"
			 @imgDelete="mediaDelete">
			</jade-image-upload>
		</div>
		<div class="title">
			联系方式
		</div>
		<div class="input easyinput" >
			  <uni-easyinput placeholder="留下联系方式，更快解决问题" v-model="formData.mobile" trim="both"></uni-easyinput>
		</div>
		<div class="footer_btn">
			<div class="btn">
				提交
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			let formData = {
			  "content": "",
			  "imgs": [],
			  "contact": "",
			  "mobile": ""
			}
			return {
				formData,
				control: true,
				columnType: 'other',
				maxCount: 6,
				compressSize: 0.2,
				imageSize: 2,
				compressQuality: 0.8,
				compressWidth: 375,
				sourceType: ['album'],
			}
		},
		methods: {
			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
			},
			//中断上传并删除
			mediaDelete(e) {
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e,1)
			},
			//上传逻辑处理
			uploadFileToServe(urlList) {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #F6F6F6;
		box-sizing: border-box;
		padding: 20rpx;
	}	
	.title{
		width: 100%;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #333333;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}
	.input{
		width: 100%;
		background: #FFFFFF;
		&.textarea{
			width: 710rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 24rpx 20rpx;
			textarea{
				width: 100%;
				height: 100%;
			}
		}
		&.image-upload{
			width: 710rpx;
			min-height: 200rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 24rpx 20rpx;
		}
		&.easyinput{
			width: 710rpx;
			min-height: 88rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 24rpx 20rpx;
		}
	}
	.footer_btn{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4rpx 12rpx 0px rgba(140,140,140,0.302);
		.btn{
			width: 710rpx;
			height: 80rpx;
			background: #275BA8;
			border-radius: 10rpx;
			margin: 16rpx 20rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>
